<template>
	<div>
	<div class="box2" v-for="list in handelObj">
		<p>{{list.comingTitle}}</p>
		<div class="content" v-for="item in list.items">
			<div class="img">
				<img :src="filterImg(item.img)"/>
			</div>
			<div class="details">
				<!--标题-->
				<div class="movie_t">
					<div class="title">{{item.nm}} <span class="span_bg"></span></div>
					<div class="max_logo" :class="item.version"></div>
				</div>
				<!--n个人想看-->
				<div class="wantSee" ><span>{{item.wish}}</span>人想看</div>
				
				<!--主演-->
				<div class="yanyuan">主演:{{item.star}}</div>
				<!--今天n家影院放映-->
				<div class="movie_shop" >{{item.rt}}上映</div>
				<!--预售按钮-->
				<div class="yushou" v-if="item.showst==4">预售</div>
				<!--购票按钮-->
				<div class="buy"v-if="item.showst==1">想看</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
import axios from "axios"
import  api from '@/api/index.js'
export default{

	data:function(){
		return {
//				list:[],
			handelObj:""
		}
	},
	methods:{
		_handelData(coming){
			console.log(coming)
			var obj={};
			coming.forEach((el)=>{
				if(!obj[el.comingTitle]){
					obj[el.comingTitle]={comingTitle:el.comingTitle,
					items:[]
					}
				}
//				console.log(obj[el.comingTitle])
				obj[el.comingTitle].items.push(el)
			})
			
			this.handelObj=obj;
			console.log(this.handelObj)
		},
		filterImg(imgSrc){
			return imgSrc.replace(/\w.h/,"128.180")
		}
	},
	mounted(){
		axios.get(api.movieNotShow2)
		.then((res)=>{
			console.log(res)
			console.log(res)
			this._handelData(res.data.coming)
		})

	}
}
</script>

<style lang="scss" scoped>
		.content{
		padding: 12px 14px 12px 0;
		display: flex;
	}
	.img{
		width: 65px;
		height: 95px;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.span_bg{
		
	}
	.details{
		margin-left: 10px;
		border-bottom: 1px solid #e6e6e6;
		width: 75%;
		position: relative;
	}
	.title{
		font-size: 17px;
		font-weight: 600;
		color: #333;
		margin-bottom: 5px;
	}
	.wantSee{
		font-size: 13px;
		margin-bottom: 5px;
		span{
			font-size: 15px;
			color: #faaf00;
			font-weight: 600;
		}
	}
	.score{
		font-size: 13px;
		span{
			color: #faaf00;
			font-weight: bold;
			font-size: 15px;
		}
	}
	.yanyuan{
		font-size: 13px;
		overflow: hidden;
		width: 200px;
		height: 15px;
		/*超出部分...*/
		text-overflow:ellipsis;
		white-space: nowrap;
		margin-bottom: 5px;
		color: #666;
	}
	.movie_shop{
		font-size: 13px;
		color: #666;
		margin-bottom: 15px;
		
	}
	.show{
		font-size: 13px;
		color: #666;
	}
	.show_time{
		font-size: 14px;
		color: #333;
		padding: 12px 0px 0;
	}
	.yushou{
		width: 47px;
		height: 27px;
		background: deepskyblue;
		border-radius: 2px;
		text-align:center;
		font-size: 12px;
		color: white;
		line-height: 27px;
		position: absolute;
		top: 30%;
		right: 0;
	}
	.buy{
		width: 47px;
		height: 27px;
		background: #faaf00;
		border-radius: 2px;
		text-align:center;
		font-size: 12px;
		color: white;
		line-height: 27px;
		position: absolute;
		top: 30%;
		right: 0;
	}
	.movie_t{
		display: flex;
		align-items: center;
	}
	.max_logo{
		
		width: 43px;
		height: 14px;
		margin-left: 5px;
		border-radius: 2px;
	}
	.v3d{
		background-image: url(../../assets/3D.png);
		background-size: 47.5%;
		background-repeat: no-repeat;
	}
	.v3d.imax{
		background-image: url(../../assets/3DIMAX.png);
		background-size: 100%;
	}
	.v2d.imax{
		background-image: url(../../assets/2DIMAX.png);
		background-size: 100%;
	}
</style>